<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{seo}}
    <title>{{$title}}</title>
    <meta name="keyword" content="{{$keyword}}" />
    <meta name="description" content="{{$describe}}" />
    {{/seo}}
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/reset.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/swiper_2.7.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/header.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/footer.css">
    <link rel="stylesheet" href="{{$static_path}}/static/css/dh/dh-dot.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/common.css">
    <script src="{{$static_path}}/static/common/js/jquery-1.11.3.js"></script>
</head>

<body>
    <!-- 头部部分 -->
    {{include file="header.tpl"}}
    <!-- 内容区域 -->
    <div class="dh-main">
        <div class="dh-banner"></div>
        <div class="main-content">
            <div class="main-left">
                <div class="dh-top1">
                    <p class="h-top">龙现东海</p>
                </div>
                <ul class="dh-list">
                    {{navigation parentid="2"}}
                        {{foreach $list as $k => $v}}
                            <li> <a href="{{$v['url']}}" {{if $get.category|in_array:$v['allchildurl']}}class="dh-acitve"{{/if}}>{{$v['name']}}</a></li>
                        {{/foreach}}
                    {{/navigation}}
                </ul>
            </div>
            <div class="main-right">
                {{crumbs url=$smarty.get.category}}
                <div class="right-txt-box">
                    <h1>{{$title}}</h1>
                    <div class="wz">
                        <span class="wz-span">您的位置：<a href="">首页</a> > {{$crumbs}} </span>
                    </div>
                </div>
                {{/crumbs}}
                <div class="box-txt">
                    <ul class="cs-tabs">
                        {{content category=$smarty.get.category sort='asc'}}
                        {{foreach $list as $k => $v}}
                        {{if $k == 0}}
                            <li class="cs-active">{{$v['title']|mb_substr:'0':'2'}}</li>
                        {{else}}
                            {{if $v['title']|mb_substr:'0':'2' <> $list[$k-1]['title']|mb_substr:'0':'2'}}
                            <li>{{$v['title']|mb_substr:'0':'2'}}</li>
                            {{/if}}
                        {{/if}}
                        {{/foreach}}
                        {{/content}}
                    </ul>
                    <ul class="department-tabs">
                        <!-- <li class="department-active">东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司苏州营业部</li>
                        <li>东海期货有限责任公司南京营业部</li>
                        <li>东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司淮安营业部</li>
                        <li>东海期货有限责任公司南京营业部</li>
                        <li>东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司淮安营业部</li> -->
                    </ul>
                    <div class="tabs-map">
                        <div id="allmap"></div>
                        <div id="r-result"></div>
                    </div>
                    <div class="txt-map">
                        <!-- <p>东海期货有限责任公司常州营业部</p>
                        <p>电话：0519-88111456 </p>
                        <p>地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000) </p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--放一个id为footer的div,把footer.html加载到这块-->
    {{include file="footer.tpl"}}
    <!-- 底部部分 -->
</body>

<!-- 加载头尾 -->

<script src="{{$static_path}}/static/common/js/load.js"></script>
<script src="{{$static_path}}/static/common/js/swiper_2.7.js"></script>
<!-- 引入百度地图 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=mvguHmjvDsnfQGcStOTYGLN3l9gu1SDM"></script>
<!-- <script src="{{$static_path}}/static/js/dh-dot.js"></script> -->
<script>
var index = 0;

// $(function(){
$('.cs-tabs>li').click(function () {
    $(this).addClass('cs-active').siblings().removeClass('cs-active')
    // 点击当前的下标
    var i = $(this).index()

    console.log(i)  //当前点击的下标传给后端
    index = i;

    fns(boxs[index])

})

// 默认一进来显示一次数据
function fns(boxs) {
    //拿到数据渲染数据内容
    var html = '';
    $(".department-tabs").html('')
    $.each(boxs, function (k, v) {  // 这里的函数参数是键值对的形式，k代表键名，v代表值
        html += `<li>${boxs[k].txt}</li>`
    });
    // console.log(html)
    $(".department-tabs").append(html);

}


var boxs = 
[
    {{content category=$smarty.get.category sort='asc'}}
    {{foreach $list as $k => $v}}
    {{if $k == 0}}
        [
            {{foreach $list as $k1 => $v1}}
                {{if $k1 > $k}}
                    {{if $v1['title']|mb_substr:'0':'2' == $v['title']|mb_substr:'0':'2'}}
                    {
                        txt: '{{$v1['title']|mb_substr:'3'}}'
                    },
                    {{/if}}
                {{else}}
                {
                    txt: '{{$v['title']|mb_substr:'3'}}'
                },
                {{/if}}
            {{/foreach}}
        ],
    {{else}}
        {{if $v['title']|mb_substr:'0':'2' <> $list[$k-1]['title']|mb_substr:'0':'2'}}
            [
                {{foreach $list as $k1 => $v1}}
                    {{if $v1['title']|mb_substr:'0':'2' == $v['title']|mb_substr:'0':'2'}}
                    {
                        txt: '{{$v1['title']|mb_substr:'3'}}'
                    },
                    {{/if}}
                {{/foreach}}
            ],
        {{/if}}
    {{/if}}
    {{/foreach}}
    {{/content}}

]
    
fns(boxs[index])  //默认一进来显示的数据回调


// 模拟数据内容使用接口时候请删除
var dataMap = 
[
    {{content category=$smarty.get.category sort='asc'}}
    {{foreach $list as $k => $v}}
    {{if $k == 0}}
        [
            {{foreach $list as $k1 => $v1}}
                {{if $k1 > $k}}
                    {{if $v1['title']|mb_substr:'0':'2' == $v['title']|mb_substr:'0':'2'}}
                    {
                        xy: '{{$v1['attr'][5].attr_value}}',
                        title1: "{{$v1['title']|mb_substr:'3'}}",
                        title2: "{{$v1['attr'][0].attr_value}}",
                        title3: "{{$v1['attr'][1].attr_value}}",
                        title4: "{{$v1['attr'][2].attr_value}}",
                        txt3Box: {
                            txt1: "{{$v1['title']|mb_substr:'3'}}",
                            txt2: "{{$v1['attr'][3].attr_value}}",
                            txt3: "{{$v1['attr'][4].attr_value}}"
                        }
                    },
                    {{/if}}
                {{else}}
                {
                    xy: '{{$v['attr'][5].attr_value}}',
                    title1: "{{$v['title']|mb_substr:'3'}}",
                    title2: "{{$v['attr'][0].attr_value}}",
                    title3: "{{$v['attr'][1].attr_value}}",
                    title4: "{{$v['attr'][2].attr_value}}",
                    txt3Box: {
                        txt1: "{{$v['title']|mb_substr:'3'}}",
                        txt2: "{{$v['attr'][3].attr_value}}",
                        txt3: "{{$v['attr'][4].attr_value}}"
                    }
                },
                {{/if}}
            {{/foreach}}
        ],
    {{else}}
        {{if $v['title']|mb_substr:'0':'2' <> $list[$k-1]['title']|mb_substr:'0':'2'}}
            [
                {{foreach $list as $k1 => $v1}}
                    {{if $v1['title']|mb_substr:'0':'2' == $v['title']|mb_substr:'0':'2'}}
                    {
                        xy: '{{$v1['attr'][5].attr_value}}',
                        title1: "{{$v1['title']|mb_substr:'3'}}",
                        title2: "{{$v1['attr'][0].attr_value}}",
                        title3: "{{$v1['attr'][1].attr_value}}",
                        title4: "{{$v1['attr'][2].attr_value}}",
                        txt3Box: {
                            txt1: "{{$v1['title']|mb_substr:'3'}}",
                            txt2: "{{$v1['attr'][3].attr_value}}",
                            txt3: "{{$v1['attr'][4].attr_value}}"
                        }
                    },
                    {{/if}}
                {{/foreach}}
            ],
        {{/if}}
    {{/if}}
    {{/foreach}}
    {{/content}}

]

// 营业部分的切换以及获取数据
// $('.department-tabs>li').each(function(){

// })




$(".department-tabs").on('click', 'li', function(){
    // console.log($(this), '这是')
    $(this).addClass('department-active').siblings().removeClass('department-active')
    // console.log($(this).index(), "下标");  //这是当前的下标做法一点击当前下标请求数据，把当前下标传给你，你把当前下标数据反给我
    var indexs = $(this).index()

    // console.log($(this).index(), '44444');
    $.each(dataMap[index], function (v, m) {
        // console.log(indexs,'5555');
        // 判断循环当前下标是否点击这个有数据没有
        if (indexs == v) {

            var dataInfo = dataMap[index][v]
            var tmp = dataInfo.xy.split(',')
            dataInfo.x = tmp[0]
            dataInfo.y = tmp[1]
            // console.log(dataInfo)
            dataMaps(dataInfo)
        }
    })
})




//地图提示样式
var content = `<div class='box-map'>
    <img style='float:left;margin:4px' id='imgDemo' src='{{$static_path}}/static/images/dh-dot/message-img1.png'/>
    <h1>东海期货有限责任公司常州营业部</h1>
    <p class='map-txt1'>统一社会信用代码：91320000678311769L</p>
    <p class='map-txt2'>设立时间：2008/7/14</p>
    <p class='map-txt3'>负责人：黄霄宏</p>
    </div></div>`
// 渲染数据内容
function dataMaps(dataInfo) {
    var txt3Box = dataInfo.txt3Box  //这是底部的数据内容

    //弹窗样式渲染
    content = `<div class='box-map'><img style='float:left;margin:4px' id='imgDemo' src='{{$static_path}}/static/images/dh-dot/message-img1.png'/><h1>${dataInfo.title1}</h1>
        <p class='map-txt1'>统一社会信用代码：${dataInfo.title2} </p>
        <p class='map-txt2'>设立时间：${dataInfo.title3}</p>
        <p class='map-txt3'>负责人：${dataInfo.title4}</p>
        </div></div>`


    //底部样式渲染
    mapBox(dataInfo.x, dataInfo.y, content)
    $('.txt-map').html('')
    $('.txt-map').append(`<p>${txt3Box.txt1}</p>
                        <p>电话：${txt3Box.txt2} </p>
                        <p>地址：${txt3Box.txt3}</p>`)

}


// 百度地图功能代码
function mapBox(x, y, content) {
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(x, y);  //当前的经纬度
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom(true)    //放大缩小地图鼠标滚动
    var opts = {
        width: 463,     // 信息窗口宽度
        height: 169,     // 信息窗口高度
        enableMessage: true,//设置允许信息窗发送短息
    }
    var infoWindow = new BMap.InfoWindow(content, opts);   // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
}
mapBox(119.967316, 31.782288, content) //默认显示常州地址内容
// })

</script>

</html>